<template>
  <div class="container">
    <div class="title">
        <img src="" />
    </div>
    <div class="main">
      
    </div>
    <div class="nav">

    </div>
    <div id="leaflet" class="leaflet"></div>
  </div>
</template>

<script lang="ts">
import { onMounted } from "vue";
import L from "leaflet";
import api from "@/api";

export default {
  setup() {
    let map = null;
    onMounted(() => {
      // initLeaflet();
      queryList();
    });

    async function queryList() {
      const params = {
        districtId: 2,
        type: 1,
      };
      const res = await api.getDistrictByCondition(params);
      console.log(res);
    }

    const initLeaflet = (lat: number, lng: number) => {
      return L.map("leaflet", {
        center: [lat, lng],
        zoom: 13,
      });
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.container
  position: relative;
  width 100%
  height 100%
  display flex
</style>
